<template>
	<div :id="echId" style="pointer-events: all;"></div>
</template>

<script>
	/*
echId: echart图dom的id，必须保证整个项目内的次id不会重复
echData: echart图的数据，必须有的label（标题）和value（数据）
unit: 数据的单位
*/
	export default {
		props: {
			echId: {
				type: String
			},
			echData: {
				type: Array,
				default: () => {
					return [];
				}
			},
			unit: {
				type: String,
				default: '个'
			}
		},
		computed: {
			labelArr() {
				var arr = [];
				for (var i = 0; i < this.echData.length; i++) {
					arr.push(this.echData[i].label);
				}
				console.log(arr);
				return arr;
			},
			dataArr() {
				var arr = [];
				for (var i = 0; i < this.echData.length; i++) {
					arr.push(this.echData[i].value);
				}
				return arr;
			}
		},
		data() {
			return {
				jishiqi1: null
			};
		},
		watch: {
			echId: {
				handler(val) {
					if (val !== null && val !== undefined && val !== '') {
						setTimeout(() => {
							this.init();
						}, 100);
					}
				},
				immediate: true
			}
		},
		methods: {
			init() {
				var myChart = this.$echarts.init(document.getElementById(this.echId));
				var option = {
					color: '#2c7eca',
					grid: {
						top: '30px',
						left: '20vw',
						right: '20vw',
						bottom: '20vw'
					},
					xAxis: {
						type: 'category',
						data: this.labelArr,
						splitLine: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						nameTextStyle: {
							color: '#fff'
						},
						axisLabel: {
							color: '#76afe3',
							// fontSize: 5,
							fontSize: 11
						}
					},
					yAxis: {
						type: 'value',
						data: this.labelArr,
						boundaryGap: true,
						splitLine: {
							show: false
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						}
					},
					series: [{
						data: this.dataArr,
						type: 'bar',
						barWidth: '10vw',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(220, 220, 220, 0.8)'
						},
						color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#01c3f1'
							},
							{
								offset: 0.5,
								color: '#157cf1'
							},
							{
								offset: 1,
								color: '#01c3f1'
							}
						]),
						label: {
							normal: {
								formatter: (data) => {
									return data.value + '个小时'
								},
								position: 'top',
								show: true,
								fontSize: 10,
								textStyle: {
									//数值样式
									color: '#ffffff',
									fontSize: 11,
								},
								// fontSize: 5
							}
						},

					}]
				};
				myChart.setOption(option);
				this.jishiqi(myChart, option);
			},
			jishiqi(myChart, option) {
				let index = 1;
				var masLength = option.series.length > 0 ? option.series[0].data.length : 0;
				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: 0
				});

				this.jishiqi1 = setInterval(() => {
					for (var i = 0; i < masLength; i++) {
						myChart.dispatchAction({
							type: 'downplay',
							seriesIndex: 0,
							dataIndex: i
						});
					}

					myChart.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: index
					});
					if (index < masLength - 1) {
						index++;
					} else {
						index = 0;
					}
				}, 2000);
				document.getElementById(this.echId).addEventListener('mouseover', () => {
					for (var i = 0; i < masLength; i++) {
						myChart.dispatchAction({
							type: 'downplay',
							seriesIndex: 0,
							dataIndex: i
						});
					}
					clearInterval(this.jishiqi1);
					this.jishiqi1 = null;
				});
				document.getElementById(this.echId).addEventListener('mouseout', () => {
					this.jishiqi1 = setInterval(() => {
						for (var i = 0; i < masLength; i++) {
							myChart.dispatchAction({
								type: 'downplay',
								seriesIndex: 0,
								dataIndex: i
							});
						}

						myChart.dispatchAction({
							type: 'highlight',
							seriesIndex: 0,
							dataIndex: index
						});
						if (index < masLength - 1) {
							index++;
						} else {
							index = 0;
						}
					}, 2000);
				});
			}
		}
	};
</script>

<style></style>
